<template>
  <div>
    <div>
      <van-cell-group>
        <van-cell class="firss">
          <img src="./loginimg/login.png" alt="" srcset="" />
          <van-button @click="showLogin">登录/注册</van-button>
        </van-cell>
        <van-cell> 全部订单 </van-cell>
        <van-cell> 我的预约 </van-cell>
        <van-cell> 应用推荐 </van-cell>
        <van-cell> 用户福利 </van-cell>
      </van-cell-group>
    </div>
    <van-popup
      v-model="showLoginPopup"
      position="right"
      :style="{ height: '100%' }"
    >
      <div>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
        ></van-field>
        <van-field
          v-model="password"
          label="密码"
          placeholder="请输入密码"
          type="password"
        ></van-field>
        <van-button type="primary" block @click="login">登录</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLoginPopup: false,
      username: "",
      password: "",
    };
  },
  methods: {
    showLogin() {
      this.showLoginPopup = true;
    },
    login() {
      // 处理登录逻辑
      this.showLoginPopup = false;
    },
  },
};
</script>
<style scoped lang="less">
/deep/.firss {
  align-items: center;
  display: flex;
}
/deep/img,
p {
  height: 100px;
  margin: 0;
}
</style>
